<template>
    <div class="fosterDetaile">
        <Water :w-text="waterText">
            <div class="fosterContent" v-if="fosterMessage!=null">
                <h1>寄养宠物具体信息</h1>
                <p>
                    <img style="width: 100px;max-height: 100px;" :src=fosterMessage.jimagesBase64 />
                </p>
                <p>
                    <span>账号：</span><i>{{ fosterMessage.uname }}</i>
                </p>
                <p>
                    <span>手机号：</span><i>{{ fosterMessage.iphone }}</i>
                </p>
                <p>
                    <span>宠物种类：</span><i>{{ fosterMessage.jkind }}</i>
                </p>
                <p>
                    <span>备注：</span><i>{{ fosterMessage.descrs }}</i>
                </p>
                <p>
                    <span>宠物医院名称：</span><i>{{ baseData.name }}</i>
                </p>
                <p>
                    <span>宠物寄养负责人：</span><i>{{ baseData.fsupers }}</i>
                </p>
                <p>
                    <span>寄养负责人电话：</span><i>{{ baseData.fiphone }}</i>
                </p>
                <p>
                    <span>宠物医院地址：</span><i>{{ baseData.address }}</i>
                </p>
                <div class="map">
                    <Map :showOperate="false" :coordinate="[baseData]" :flag="base"></Map>
                </div>
                <p>
                    <span style="font-size: 12px;color: #333;">感谢您的贡献，具体的事项请电话寄养负责管理人员！！！</span>
                </p>
            </div>
        </Water>
    </div>
</template>
<script>
import { defineComponent } from '@vue/composition-api'
import { getCurrentInstance} from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex' 
import Map from './map'
import Water from "@/util/watermark.vue"
export default defineComponent({
    components:{
        Map,Water
    },
    setup() {
        // 路由
        const router = useRouter();
        // vuex的数据对象
        const store = useStore();
        const { proxy } = getCurrentInstance();
        return{
            proxy,
            router,
            store
        } 
    },
    data(){
        return{
            fosterMessage:null,
            UserMessage:null,
            baseData:{},
            waterText:'',
            base:"base"
        }
    },
    created () {
        this.UserMessage = this.store.state.UserMessage;
        this.fosterMessage = this.store.state.FosterMessage;
        this.waterText = this.UserMessage.name;
        if(!this.fosterMessage || !this.UserMessage) return;
        this.LoadBase()
    },
    methods:{
        LoadBase(){
            let self = this;
            self.$http.get(`${self.baseUrl}/hospital/selectId?id=1`).then(res=>{
                self.baseData = res.data;
            })
        }
    }
})
</script>
<style scoped>
    .fosterContent{
        width: 100%;
        overflow: hidden;
        text-align: center;
        border-radius: 10px;
    }
    .fosterContent h1{
        margin-bottom: 20px;
        margin-top: 10px;
    }
    .fosterContent p{
        margin: 8px 0;
        color: #f42626;
    }
    .fosterContent p span{
        margin: 8px 0;
        font-size: 16px;
    }
    .fosterContent p i{
        font-style: normal;
        color: #006eff;
    }
    .map{
        width: 600px;
        height: 200px;
        margin: 20px auto 15px auto;
    }
</style>